<template>
    <swiper 
    :loop="true" 
    :spaceBetween="10" 
    :pagination="{
        clickable:true,
    }"
    class=" w-[400px] h-[400px]"
    :thumbs="{ swiper: thumbsSwiper }" 
    :modules="[FreeMode,Pagination,Thumbs]">
    <swiper-slide v-for="item in goods_photo" :key="item">
      <div class=" flex justify-center items-center">
        <img :src="item" />
      </div>
    </swiper-slide>
    </swiper>
    <swiper
    @swiper="setThumbsSwiper"
    class=" w-[400px]"
    :spaceBetween="5"
    :slidesPerView="4"
    :freeMode="true"
    :watchSlidesProgress="true"
    :modules="[FreeMode,Thumbs,Pagination]"
  >
    <swiper-slide v-for="item in goods_photo" :key="item">
        <img :src="item" />
    </swiper-slide>
  </swiper>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import {ref} from "vue"
import 'swiper/css';
import "swiper/css/free-mode";
import 'swiper/css/pagination';
import "swiper/css/thumbs";
import { FreeMode, Pagination, Thumbs } from 'swiper';

const props = defineProps({
    goods_photo: {
        type: Array,
        default: () => [],
        required: true
    }
})
let thumbsSwiper = ref(null);

const setThumbsSwiper = (swiper) => {
  thumbsSwiper.value = swiper;
}
</script>
<style></style>